<template>
	<view style="border: 1px solid #fff;">
		<view class="card" v-for="(item,i) in list" :key="i">
			<view class="no">编号: {{item.order_no}}</view>
			<view class="info flex mt-30">
				<view class="mr-20">
					<i-icon icon="icon-name" size="27rpx" />
				</view>
				<view class="f1">
					<view>{{item.member_info.auth_name}}</view>
					<view class="description mt-20" style="width: 350rpx;color: #999999;">
						{{item.member_info.position}}｜{{item.member_info.company}}
					</view>
				</view>
				<view class="u-text-center">
					<view class="font-bold"><text class="font-24">¥</text><text class="font-36">{{item.money}}</text>
					</view>
					<view class="font-22 mt-10" :style="{'color': item.status == 2?'red':'#999999'}">
						{{filterState(item.status)}}
					</view>
				</view>
			</view>

			<!-- 详情 -->
			<view v-show="item.show" style="padding-top: 20rpx;border-top: 1rpx solid #E7E5E0;margin-top: 30rpx;">
				<!-- 同意和 拒绝 查看微信号 -->
				<block v-if="item.status == 1">
					<view class="flex">
						<view class="mr-20 flex flex-ai-fs">
							<i-icon icon="icon-confirm" size="24rpx" />
						</view>
						<view class="font-24" style="margin-top: 4rpx;">确认后将推送您的微信号给对方，对方添加您为好友，您<br />
							需在72小时内到微信-通信录-新的朋友列表中确认添加，</br>添加完成后收益将自动结算到您的钱包账户。</view>
					</view>
					<!-- 拒绝 -->
					<view class="flex" style="margin: 10rpx 0;">
						<view class="mr-20 flex flex-ai-fs">
							<i-icon icon="icon-refuse" size="24rpx" color="#FF0000" />
						</view>
						<view class="font-24" style="color: #FF0000;margin-top: 4rpx;">拒绝添加、超时确认支付费用将原路退回！</view>
					</view>
					
					<view class="flex">
						<view class="mr-20 flex flex-ai-fs">
							<i-icon icon="icon-pay" size="24rpx" />
						</view>
						<view class="font-24" style="margin-top: 4rpx;">支付时间：{{item.paytime}}</view>
					</view>
				</block>
				<block v-if="item.status == 4">
					<block v-if="swiperCurrent == 1">
						<view class="flex">
							<view class="mr-20 flex flex-ai-fs">
								<i-icon icon="icon-confirm" size="24rpx" />
							</view>
							<view class="font-24" style="margin-top: 4rpx;">确认后将推送您的微信号给对方，对方添加您为好友，您<br />
								需在72小时内到微信-通信录-新的朋友列表中确认添加，</br>添加完成后收益将自动结算到您的钱包账户。</view>
						</view>
						<!-- 拒绝 -->
						<view class="flex" style="margin: 10rpx 0;">
							<view class="mr-20 flex flex-ai-fs">
								<i-icon icon="icon-refuse" size="24rpx" color="#FF0000" />
							</view>
							<view class="font-24" style="color: #FF0000;margin-top: 4rpx;">拒绝添加、超时确认支付费用将原路退回！</view>
						</view>
						
						<view class="flex">
							<view class="mr-20 flex flex-ai-fs">
								<i-icon icon="icon-pay" size="24rpx" />
							</view>
							<view class="font-24" style="margin-top: 4rpx;">支付时间：{{item.paytime}}</view>
						</view>
					</block>
				
					<block v-if="swiperCurrent == 0">
						<view class="flex flex-ai-c">
							<i-icon icon="icon-pay" size="24rpx" class="mr-20" />
							<view class="font-24" style="margin-top: 3rpx;">
								支付时间：{{item.paytime}}</view>
						</view>
					</block>
				</block>
				<!-- 退款  -->
				<block v-if="item.status == 3 || item.status == 2">
					<!-- 拒绝 -->
					<view class="flex" style="margin: 10rpx 0;">
						<view class="mr-20 flex flex-ai-fs">
							<i-icon icon="icon-refuse" size="24rpx" color="#FF0000" />
						</view>
						<view class="font-24" style="color: #FF0000;margin-top: 4rpx;">拒绝请求，费用已原路退回！</view>
					</view>

					<view class="flex">
						<view class="mr-20 flex flex-ai-fs">
							<i-icon icon="icon-pay" size="24rpx" />
						</view>
						<view class="font-24" style="margin-top: 4rpx;">退款时间：{{item.returntime}}</view>
					</view>
				</block>

				<block v-if="[0,5,6].includes(item.status)">
					<view class="flex flex-ai-c">
						<i-icon icon="icon-pay" size="24rpx" class="mr-20" />
						<view class="font-24" v-if="[5].includes(item.status)" style="margin-top: 3rpx;">
							支付时间：{{item.paytime}}</view>
						<view class="font-24" v-if="[0,1,6].includes(item.status)" style="margin-top: 3rpx;">
							创建时间：{{item.createtime}}</view>
					</view>
				</block>
			</view>
			<view class="flex flex-ai-c flex-jc-c detail" @click="detail(item)">
				<view class="mr-10 font-24 mt-10" style="color: #666666;">{{item.show?'收起':'详情'}}</view>
				<view>
					<i-icon :icon="item.show?'icon-up':'icon-lower'" size="11rpx" color="#666666" />
				</view>
			</view>
			<view>
				<!-- 待支付 -->
				<view class="card-btn flex flex-jc-fe" v-if="item.status == 0 && swiperCurrent == 0">
					<view>待支付</view>
				</view>
				<view class="card-btn flex flex-ai-c flex-jc-sb" v-if="item.status == 0 && swiperCurrent == 1">
					<u-count-down :timestamp="item.timestamp" format="mm分ss秒自动关闭"></u-count-down>
					<view class="btn" @click="goPay(item.id)">去支付</view>
				</view>
				<!-- 待审核 -->
				<view v-if="item.status == 1">
					<view class="card-btn flex flex-jc-fe" v-if="swiperCurrent == 1">
						<view>待同意</view>
					</view>
					<view class="card-btn flex flex-jc-fe" v-if="swiperCurrent == 0">
						<view @click="opertFriendApply(item,4)">同意</view>
						<view @click="opertFriendApply(item,3)" style="margin-left: 60rpx;">拒绝</view>
					</view>
				</view>
				<!-- 待确认  -->
				<view v-if="item.status == 4">
					<view class="card-btn flex flex-jc-fe" v-if="swiperCurrent == 0">
						<view>待确认</view>
					</view>
					<view class="card-btn flex flex-jc-fe" v-if="swiperCurrent == 1">
						<view @click="getWechatNo(item)">查看微信号</view>
						<view style="margin-left: 60rpx;" @click="opertFriendApply(item,5)">请确认</view>
					</view>
				</view>
				<!-- 已完成 -->
				<view class="card-btn flex flex-jc-fe" v-if="item.status == 5">
					<view>已完成</view>
				</view>
				<!-- 已取消  -->
				<view class="card-btn flex flex-jc-fe" v-if="item.status == 6 || item.status == 2 || item.status == 3">
					<view>已取消</view>
				</view>
			</view>
		</view>
	</view>
	<u-modal @cancel="show = false" :show-title="false" :model-value="show" :show-confirm-button="false" maskCloseAble
		:show-cancel-button="false">
		<view class="modal" style="padding: 0 25rpx;">
			<view class="modal-title font-36 u-text-center font-bold mt-30">
				微信号
			</view>
			<view class="modal-no font-28 u-text-center mt-20 mb_20">{{wxNo || '暂无数据'}}</view>
			<view class="modal-copy font-36 mt-20 mb_20" @click="handleCopy(wxNo)">
				复制微信号
			</view>
		</view>
	</u-modal>
</template>

<script lang="ts" setup>
	import {
		computed, ref
	} from 'vue'
	import me from '../../../../api/me';
	import order from '../../../../api/order';
	interface Props {
		list ?: any[],
		swiperCurrent ?: number
	}
	const props = withDefaults(defineProps<Props>(), {
		list: () => [],
		swiperCurrent: 0
	})
	const emit = defineEmits(['reset'])
	let show = ref(false)
	let wxNo = ref('')
	const opertFriendApply = async (item : any, status : number) => {
		const res = await me.opertFriendApply({
			type: props.swiperCurrent + 1,
			status: status,
			order_id: item.id
		})
		if (res.code === 200) {
			emit('reset')
		}

	}
	const handleCopy = (e) => {
		wx.setClipboardData({
			data: e,
			success: function (res) {
				wx.showToast({ title: '复制成功' })
			}
		})
	}
	const getWechatNo = async (item : any) => {
		const res = await me.getWechatNo({
			order_id: item.id
		})
		show.value = true
		wxNo.value = res.data.wechat_no
	}
	const filterState = computed(() => {
		return (state : number) => {
			let text = ''
			switch (state) {
				case 0:
					text = '待支付'
					break
				case 1:
					text = '待审核'
					break
				case 2:
					text = '已退款'
					break
				case 3:
					text = '已退款'
					break
				case 4:
					text = '待确认'
					break
				case 5:
					text = '已完成'
					break
				case 6:
					text = '已取消'
					break
			}
			return text
		}
	})
	const detail = (e) => {
		e.show = !e.show
	}
	const goPay = async (order_id : any) => {
		const res = await order.wxpay({
			order_id: order_id
		})
		let payInfo : any = res.data.payRes
		uni.requestOrderPayment({
			...payInfo,
			success() {
				showMsg('支付成功')
				emit('reset')
			},
			fail(err2) {
				if (err2.errMsg === 'requestPayment:fail cancel') {
					showMsg('您已取消支付')
				} else {
					showMsg('支付失败')
				}
			}
		})
	}
	const showMsg = (msg : string) => {
		uni.showToast({
			title: msg,
			icon: 'none'
		})
	}
</script>

<style scoped lang="scss">
	.btn {
		width: 150rpx;
		height: 58rpx;
		border-radius: 30rpx;
		border: 1rpx solid #FF0000;
		color: #FF0000;
		text-align: center;
		line-height: 58rpx;
	}

	.card {
		background: #F8F8F8;
		padding: 20rpx 20rpx 0 20rpx;
		margin: 20rpx;

		.info {
			// padding-bottom: 30rpx;
		}

		.card-btn {
			padding: 30rpx 0;
		}

		.detail {
			padding: 20rpx 0 30rpx 0;
			border-bottom: 1rpx solid #E7E5E0;
		}

		.card-btn view {
			width: 150rpx;
			height: 58rpx;
			border-radius: 30rpx;
			border: 1rpx solid #666666;
			color: #000000;
			font-size: 26rpx;
			text-align: center;
			line-height: 58rpx;
		}
	}

	.modal {
		.modal-no {
			color: #666666;
		}

		.modal-copy {
			width: 100%;
			height: 100rpx;
			background: #000000;
			border-radius: 10rpx;
			color: #fff;
			text-align: center;
			line-height: 100rpx;
		}
	}
</style>